<template>
	<div class="updateForm">
		<el-dialog title="增加图片" :visible="dialogFormVisible" @close="$emit('closeDialog')" width="50%">
			<el-form :label-position="labelPosition" label-width="150px" :model="updateForm">
				<el-form-item label="房间类型(1.豪华房 2.双人房 3.单人房)">
					<el-input v-model="updateForm.item_id"></el-input>
				</el-form-item>
				<imgUpload @uploaded="uploaded" @uploadFail="uploadFail" :size="500"></imgUpload>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="$emit('closeDialog')">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import imgUpload from "../imgUpload";
	// import imgUpload from '../imgUpload';
	export default {
		name: "UserUpdate",
		props: ["dialogFormVisible", "toChangeRow"],
		data() {
			return {
				labelPosition: "right",
				updateForm: {
					item_id: "",
					url: ""
				},
				imageUrl: "",
				OldImageUrl: "",
				// uploadApi: "http://127.0.0.1:8000/api/img/uploadImg"
			};
		},
		watch: {
			toChangeRow: function(obj) {
				this.updateForm = { ...obj
				};
				
				// this.OldImageUrlp=obj.avatar_url;
			}
		},
		methods: {
			submit: async function() {
				console.log(this.updateForm)
				let data = await this._axios
					.post("/ycw/rooms/addImage", this.updateForm)
					.then(data => data.data);
				console.log(data);
				if (data) {
					this.$alert(`${data.msg}`, {
						confirmButtonText: "确定",
						callback: () => {
							this.$message({
								type: "warning",
								message: `${data.msg}`
							});
							this.$emit("refresha");
						}
					});
				}
			},
			uploaded: function(res) {
				console.log(res);
				this.OldImageUrl = this.updateForm.url;
				this.updateForm.url = res.path;
			},
			uploadFail: function(res) {
				console.log(res);
				//上传错误处理

			},
			rowid:function(a){
				console.log(a.index,789123)
			}
			

		},
		components: {
			imgUpload
		}
	};
</script>

<style lang="scss">
	.updateForm {
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style>
